<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录界面</title>
<style>
 * {
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}

input,button{
    background:transparent;
    border: none;
    outline: none; 
    
}
body{
height: 100vh;
/*background:linear-gradient(#141e30,#243b55);*/
background-image:url(img/01318d5a82c795a801219231b31910.jpg@3000w_1l_2o_100sh.jpg);
background-size:cover;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color:violet;

}
.loginbox{
    width: 500px;
    height: 364px;
    background:rgba(0, 0,0,0.5);
    box-shadow:  0px 15px 25px 0 rgba(0,0,0,.6);
    padding: 40px;
    box-sizing: border-box;
    
}
h2{

    text-align: center;
    color: #FFF;
    margin-bottom: 30px;
}

.item{
    height:45px ;
    border-bottom: 1px solid #fff;
    margin-bottom: 40px;
    position: relative;
}


.item input{
    width:100% ;
    height: 100%;
    color: #fff;
    padding-top: 20px;
    box-sizing: border-box;
}

.item input:focus+label,.item input:valid+label{
    top:0px;
    font-size: 12px;
}

.item label{
    position: absolute;
    left: 0;
    top: 12px;
    transition: all 0.25s linear;
}

.btn{
    padding:10px 20px ;
    overflow: hidden;
    margin-top: 30px;
    color: violet;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn:hover{
    background: violet;
    border-radius: 5px;
    color: #fff;
    box-shadow: 0 0 5px violet,
     0 0 25px violet,
     0 0 50px violet,
     0 0 100px violet;
}
.btn>span{
    position: absolute;
}

    
/*-------------------------------------------------动画效果---------------------------------------------------------*/
.btn>span:nth-child(1){
  width:100% ;
  height: 2px;
  background:-webkit-linear-gradient(left,transparent,violet);
  left:-100% ;
  top: 0px;
  animation: line1 1s linear infinite;
}
@keyframes line1 {
    50%,100%{
        left: 100%;
    }
}
.btn>span:nth-child(2){
  width: 2px; 
  height: 100%;
  background:-webkit-linear-gradient(top,transparent,violet);
  right:0% ;
  top:-100%;
  animation: line2 1s 0.25s linear infinite;
}
@keyframes line2 {
    50%,100%{
        top: 100%;
    }
}
.btn>span:nth-child(3){
  width:100% ;
  height: 2px;
  background:-webkit-linear-gradient(left,violet,transparent);
  left:100% ;
  bottom: 0;
  animation: line3 1s 0.5s linear infinite;
}
@keyframes line3 {
    50%,100%{
       left: -100%;
    }
}
.btn>span:nth-child(4){
  width:2px ;
  height: 100%;
  background:-webkit-linear-gradient(top,violet,transparent);
  left:0;
  top:100%;
  animation: line4 1s 0.75s linear infinite;
}
@keyframes line4 {
    50%,100%{
      top: -100%;
    }
}
/*----------------------------------------------------------------------------------------------------------*/
</style>

<link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/style.css"/>
        <script src="js/jquery-3.4.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/script.js" charset="UTF-8"></script>
        <script>
         function Uno(){
             var min = 100;
             var max = 999;
        var Num=Math.floor(Math.random()*(max-min+1))+min; //floor方法返回小于等于x的最大整数
        document.getElementById("Uno").value=Num;
        }
        </script>
</head>

    <body>
        
        
        <div class="modal fade" id="add_modal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title text-success" id="myModalLabel">注册</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-inline" id="add_form">
                                <label for="Uno">用户编号：</label>
                                <input id="Uno" type="text" name="Uno" placeholder="用户编号" class="form-control sinfo" readonly><a onclick="Uno();" class="mailbox" style="cursor:pointer;">获取</a>
                                <br><br>
                                <label for="Uname">用户名：</label>
                                <input id="Uname" type="text" name="Uname" placeholder="输入用户名" class="form-control sinfo">
                                <br><br>
                                <label for="Upwd">密码：</label>
                                <input id="Upwd" type="text" name="Upwd" placeholder="输入密码" class="form-control sinfo">
                                <br><br>
                                <label for="Uquestion">密码查询问题：</label>
                                <input id="Uquestion" type="text" name="Uquestion" placeholder="输入密码查询问题" class="form-control sinfo">
                                <br><br>
                                <label for="Uanswer">密码查询答案：</label>
                                <input id="Uanswer" type="text" name="Uanswer" placeholder="输入密码查询答案" class="form-control sinfo">
                                <br><br>
                                <label for="Uid">身份证号：</label>
                                <input id="Uid" type="text" name="Uid" placeholder="输入身份证号" class="form-control sinfo">
                                <br><br>
                                <label for="Ugender">性别：</label>
                                <select id="Ugender" name="Ugender" class="form-control sinfo">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                                <br><br>
                                <label for="Uphone">手机号：</label>
                                <input id="Uphone" type="text" name="Uphone" placeholder="输入手机号" class="form-control sinfo">
                                <br><br>
                                <label for="Ucity">城市：</label>
                                <input id="Ucity" type="text" name="Ucity" placeholder="输入城市" class="form-control sinfo">
                                <br><br>
                                <label for="Uocp">职业：</label>
                                <input id="Uocp" type="text" name="Uocp" placeholder="输入职业" class="form-control sinfo">
                                <br><br>
                                <label for="Uemail">邮箱：</label>
                                <input id="Uemail" type="text" name="Uemail" placeholder="输入邮箱" class="form-control sinfo">
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
                            <button type="button" id="btn_add" class="btn btn-primary">注册</button>
                        </div>
                    </div>
                </div>
            </div>

        <button class="btn btn-sm btn-primary" id="btnyh" style="position: absolute;left: 630px;top: 275px;width: 80px;height: 50px;background:rgba(0, 0,0,0.5);box-shadow:  0px 15px 25px 0 rgba(0,0,0,.6)">用户</button>    
        <button class="btn btn-sm btn-primary" id="btngl" style="position: absolute;left: 630px;top: 325px;width: 80px;height: 50px;background:rgba(0, 0,0,0.5);box-shadow:  0px 15px 25px 0 rgba(0,0,0,.6)">管理员</button>    
        
        <div class="loginbox" id="yh" style="display: ">
             
        <form action="sbls">
         <h2 style="color:#FFF">用户登陆</h2>   
        <div class="item">
            <input type="text" required name="Uno" id="Uno">
            <label for="Uno" style="color:violet">用 户 编 号</label>
        </div>
        <div class="item">
            <input type="password" required name="Upwd" id="Upwd">
            <label for="Upwd" style="color:violet">密 码</label>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <!--<button class="btn">注册-->
        <button id="btn_showAddModal" class="btn">注册
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <button class="btn">登陆

            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </button>
    </form>
    </div>
        
            
        
        <div class="loginbox" id="gl" style="display:none ">
            <form action="als" method="get">
         <h2 style="color:#FFF">管理员登陆</h2>   
        <div class="item">
            <input type="text" required name="Ano" id="Ano">
            <label for="Ano" style="color:violet">用 户 名</label>
        </div>
        <div class="item">
            <input type="password" required name="Apwd" id="Apwd">
            <label for="Apwd" style="color:violet">密 码</label>
        </div>
      
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
        <button class="btn" >管理员登陆

            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </button>
    </form>
        </div>
            
            
    
</body>
</html>
